<template>
  <div class="LoginPage">
    <div class="top">
      <span class="fh"><van-icon name="arrow-left" @click="fh" /></span>
      <span>设置</span>
    </div>
    <div class="mainCenter">
      <div>
        <van-cell
          center
          title="绑定用户名"
          is-link
          @click="showPopup"
          class="cell"
        >
        </van-cell>
        <van-popup
          v-model="show"
          round
          class="yhmtc"
          :style="{ height: '30%', width: '80%', marginTop: '-80px' }"
          postiosn:center
        >
          <div class="sz">
            <h2>设置用户名</h2>
            <van-cell-group class="srk" @input="yhm(value)">
              <van-field v-model="value" placeholder="请输入用户名" clearable />
            </van-cell-group>
            <van-button type="primary" class="btns" round @click="gxyhm"
              >更新</van-button
            >
          </div>
        </van-popup>

        <van-cell center title="修改密码" is-link class="cell" @click="fixPass">
        </van-cell>
        <van-popup
          v-model="show2"
          round
          class="fixpass"
          :style="{ height: '30%', width: '80%', marginTop: '-80px' }"
          postiosn:center
        >
          <div class="sz">
            <h2>更新密码</h2>
            <van-cell-group class="srk">
              <van-field
                v-model="oldpassword"
                placeholder="原始密码"
                clearable
              />
              <van-field
                v-model="newpassword"
                placeholder="新密码"
                clearable
                style="margin-top: 20px"
              />
            </van-cell-group>
            <van-button type="primary" class="btnss" round @click="gxmm"
              >更新</van-button
            >
          </div></van-popup
        >
      </div>
      <div class="gray">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="Unregister"
          class="btn"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Setting",
  data() {
    return {
      oldpassword: "",
      newpassword: "",
      show: false,
      show2: false,
      value: "",
      token: "",
      userid: "",
      username: "",
      yhmval: "",
    };
  },
  methods: {
    fh() {
      this.$router.go(-1);
    },
    Unregister() {
      localStorage.removeItem("token");
      this.$router.push({ path: "/Login" });
    },
    showPopup() {
      this.show = true;
    },
    fixPass() {
      this.show2 = true;
    },
    yhm(value) {
      this.yhmval = value;
      // console.log(value);
    },
    gxyhm() {
      if (this.yhmval == "") {
        Toast("请输入用户名");
        return;
      }
     /*  if (this.yhmval) {
        Toast("用户名只能修改一次");
        this.show = false;
        return;
      } */
      this.$service
        .get("/api/user/bindusername", {
          headers: { token: this.token },
          data: {
            userid: this.userid,
            username: this.yhmval,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            Toast("修改成功");
            localStorage.setItem("username", this.yhmval);
            this.show = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gxmm() {
      if (this.oldpassword == "") {
        Toast("请输入密码");
        return;
      }
      if (this.newpassword == "") {
        Toast("请输入新密码");
        return;
      }
      console.log("this.oldpassword: ", this.oldpassword);
      console.log("this.newpassword: ", this.newpassword);
      this.$service
        .get("/api/user/updatePassword", {
          headers: { token: this.token },
          params: {
            userid: this.userid,
            oldpassword: this.oldpassword,
            newpassword: this.newpassword,
          },
        })
        .then((res) => {
          console.log(res, "password");
          if (res.data.code == 200) {
            Toast("修改成功");
            this.show2 = false;
          }
          if (res.data.code == 10030) {
            Toast("原始密码错误");
            return;
          }
        });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    console.log("this.token: ", this.token);
    this.userid = localStorage.getItem("userid");
    console.log(" this.userid: ", this.userid);
    this.username = localStorage.getItem("username");
    console.log("this.username: ", this.username);
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.LoginPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mainCenter {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.top {
  text-align: center;
  line-height: 3rem;
  border-bottom: 2px solid gray;
  position: relative;
  height: 3rem;
}
.fh {
  position: absolute;
  font-size: 20px;
  left: 1rem;
}
.cell {
  border-bottom: 1px solid rgba(128, 128, 128, 0.409);
  height: 3.5rem;
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.gray {
  flex: 1;
  background-color: rgba(128, 128, 128, 0.119);
}
.btn {
  margin-top: 2rem;
}
.sz {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
h2 {
  margin-top: 1rem;
}
.srk {
  margin-top: 1.6rem;
  margin-left: -3rem;
}
.btns {
  width: 100%;
  margin-top: 2rem;
}
.btnss {
  width: 100%;
  margin-top: 0.6rem;
}
</style>